<template>
	<div>
		<div>
			<span class='m-l-20'>
				<el-input size='mini' placeholder='请输入内容' v-model='filter.store' style='width:350px'>
					<el-select size='mini' v-model='filter.searchType' slot='prepend' style='width:110px' placeholder='请选择'>
						<el-option label='门店名称' :value='1'></el-option>
						<el-option label='门店账号' :value='2'></el-option>
					</el-select>
					<el-button size='mini' slot='append' @click='search' icon='el-icon-search'></el-button>
				</el-input>
			</span>
			<span class='m-l-20' v-if='checkPermission("agent")'>
				<router-link to='/store/add'><el-button size='mini' type='primary'>新增</el-button></router-link>
			</span>
		</div>
		<section class='m-t-50'>
			<el-table style='width:100%;font-size:12px;' ref='multipleTable' :data='storeList'>
				<el-table-column label='门店账号'>
					<template slot-scope='scope'>{{ scope.row.store_account }}</template>
				</el-table-column>
				<el-table-column label='门店名称'>
					<template slot-scope='scope'>{{ scope.row.store_name }}</template>
				</el-table-column>
				<!-- <el-table-column label='禁用状态'>
					<template slot-scope='scope'>
						<span v-if='scope.row.status === 0' class='color-67c23a'>正常</span>
						<span v-else class='color-f56c6c'>禁用</span>
					</template>
				</el-table-column> -->
				<el-table-column label='联系人'>
					<template slot-scope='scope'>{{ scope.row.contact}}</template>
				</el-table-column>
				<el-table-column label='联系电话'>
					<template slot-scope='scope'>{{ scope.row.mobile }}</template>
				</el-table-column>
				<el-table-column label='客服电话'>
					<template slot-scope='scope'>{{ scope.row.service_telephone }}</template>
				</el-table-column>
				<el-table-column label='加盟时间'>
					<template slot-scope='scope'>
						<span>{{scope.row.create_time | parseTime('{y}-{m}-{d}')}}</span>
					</template>
				</el-table-column>
				<el-table-column label='分成比例'>
					<template slot-scope='scope'>
						<span>{{scope.row.profit_rate }}%</span>
					</template>
				</el-table-column>
				<el-table-column label='总流水'>
					<template slot-scope='scope'>{{ scope.row.total_amount }}</template>
				</el-table-column>
				<el-table-column label='线上总数分成'>
					<template slot-scope='scope'>{{ scope.row.profit_amount }}</template>
				</el-table-column>
				<el-table-column label='投币总数'>
					<template slot-scope='scope'>{{ scope.row.profit_coin_amount }}</template>
				</el-table-column>
				<!-- <el-table-column label='刷卡金额'>
					<template slot-scope='scope'>{{ scope.row.profit_card_amount  }}</template>
				</el-table-column> -->
				<el-table-column label='操作' width='200'>
					<template slot-scope='scope'>
						<router-link :to='"/store/edit/" + scope.row.store_id' class='color-primary m-l-15'>编辑</router-link>
						<el-button size='mini' class='m-l-10' type='text' @click='openResetPwd(scope.row.storeAccount)'>重置密码</el-button>
						<el-button size='mini' class='m-l-10' type='text' @click='openForbidden(scope.row)'>{{scope.row.status == 0 ? "禁用" : "解禁"}}</el-button>
					</template>
				</el-table-column>
			</el-table>
			
			<div class='m-t-30'>
				<pagination ref='pagination' :query='pageQuery' v-on:page='storeList = $event' url='store/storeList'></pagination>
			</div>
			
		</section>
		
		<!-- 重置密码的弹窗 -->
		<el-dialog title='重置密码' :visible.sync='showResetPwdDiaLog' width='750px'>
			<div class='text-center'>
			<div style='font-size:20px;'>请输入密码</div>
				<div style='width:460px;;margin:30px auto;'>
					<el-input v-model='newPwd' type='password' autocomplete='off'></el-input>
				</div>
			</div>
			<div slot='footer' class='text-center'>
				<el-button style='width:460px;margin:auto;' :disabled='newPwd === ""' type='primary' @click='resetPwd()'>确 定</el-button>
			</div>
		</el-dialog>
		
		<!-- 禁用的弹窗 -->
		<el-dialog :title='currentstore.status == 0 ? "禁用提示" : "解禁"' :visible.sync='showForbiddenDiaLog' width='750px'>
			<div v-if='currentstore.status == 0' style='line-height:40px;font-size:20px;padding-left:30px;'>
				<div v-if='currentstore'>1.当前禁用代理商：{{currentstore.storeName}}</div>
				<div>2.代理商即刻起不可进入代理平台</div>
				<div>3.代理商所管理的设备立即停止新订单的生成</div>
				<div>4.使用设备用户完成当前订单后不再有新的订单生成</div>
				<div>5.当禁用前的最后一笔订单结束，设备无法使用扫码功能</div>
			</div>
			<div v-else class='text-center'>
				<div class='color-999999 f-18'>当前代理商为</div>
				<div class='color-primary m-t-30' style='font-size:30px;'>{{currentstore.storeName}}</div>
			</div>
			<div slot='footer' class='text-center'>
				<el-button style='width:460px;margin:auto;' type='primary' @click='changeStatus'>确 定</el-button>
			</div>
		</el-dialog>
		
	</div>
</template>

<script src='./index.js'></script>